<template>
  <div class="container">
    <form
      ref="loginFormRef"
      :model="loginForm"
      action=""
      class="container-loginform"
    >
      <div class="loginform-username">
        用户名:
        <input
          ref="input1"
          v-model="loginForm.user_name"
          type="text"
          placeholder="请输入账号"
          maxlength="11"
          @blur="changeName(test1)"
        >
      </div>
      <div class="loginform-password">
        密码:
        <input
          ref="input2"
          v-model="loginForm.user_pwd"
          type="password"
          placeholder="请输入密码"
          @blur="changeName(test2)"
        >
      </div>
      <div class="btn-container">
        <div class="btn-login" @click="login()">登录</div>
        <div class="btn-cancel" @click="$emit('close-dialog')">取消</div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  // props: {
  //   loginstatus: {
  //     type: Boolean,
  //     default: false
  //   }
  // },
  emits: ['close-dialog','changestatus'],
  data() {
    return{
      loginForm:{
        user_name: 'ghx',
        user_pwd: '123456'
      }
    }
  },
  methods: {
    async login() {
      const res = await this.$api.login.getLoginInfo(this.loginForm)
      if(res.data.status === 0) {
        console.log('登录成功!')
        const { token } = res.data
        localStorage.setItem('Authorization',token)
        this.$router.push({ path:'/main' })
      }else {
        console.log('登陆失败!')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.container {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  width: 450px;
  height: 300px;
  color: #000;
  .container-loginform {
    width: 100%;
    .loginform-username {
      width: 300px;
      margin-bottom: 20px;
      margin-top: 70px;
      margin-left: 40px;
    }
    .loginform-password {
      width: 300px;
      margin-left: 40px;
      margin-bottom: 50px;
    }
    .btn-container {
      width: 100%;
      display: flex;
      margin-left: 200px;
      .btn-login {
        width: 40px;
        height: 30px;
      }
      .btn-cancel {
        width: 40px;
        height: 30px;
      }
    }
  }
}

</style>
